
[#include "single/layout/layout02/layout.ftl"/]
[@htmlHead]
<link rel="stylesheet" href="${jpath}/assets/public/plugins/uploadFile/css/style.css" type="text/css"/>

[/@htmlHead]

[@htmlBody]
<div id="promptInformation"></div>
<div class="container">

    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none" id="loading">Loading...</div>
    </div>
    <div class="action">
        <div class="new-contentarea tc"><a href="javascript:void(0)" class="upload-img">
            <label for="upload-file">选择图像</label>
        </a>
            <input type="file" class="" name="fileToUpload" id="upload-file"/>
        </div>
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
    </div>

    <div class="cropped"></div>
    <input type="hidden" id="imgsrc" value="${img}"/>
</div>
<br>

<p style="margin-left: 150px;">支持jpg,gif</p>
<p style="margin-left: 150px">点击'裁切'上传喜欢图片</p>

<form method="post" id="upForm">
    <input type="hidden" name="fileName" id="fileName"/>
    <input type="hidden" name="imgStr" id="imgStr"/>
</form>


<div class="row navbar-fixed-bottom">
    <div class="col-xs-12" style="text-align: center">
        <input type="button" class="btn btn-info btn-large" value="确定" onclick="ajaxFileUpload()"/>
        <input type="button" class="btn  btn-large" value="关闭" onclick="$.bootbox.hideName('img')"/>
    </div>
</div>
[/@htmlBody]

[@htmlFoot]

<script type="text/javascript" src="${jpath}/assets/public/plugins/dialog/bootbox.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/plugins/uploadFile/ajaxfileupload.js"></script>
<script type="text/javascript" src="${jpath}/assets/public/plugins/uploadFile/js/cropbox.js"></script>
<script type="text/javascript">
    var types = ["jpg", "gif", "png", "bmp"];
    $(window).load(function () {
        var imgsrc = $("#imgsrc").val();
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: imgsrc
        };
        var cropper = $('.imageBox').cropbox(options);
        $('#upload-file').on('change', function () {
            var imgFile = $("#upload-file").val();
            //判断图片格式
            var fileType = imgFile.split(".").pop();

            if (types.indexOf(fileType.toLowerCase()) < 0) {
                $("#imgsrc").removeAttr("value");
                $('.imageBox').removeAttr("style");
                alert("请选择jpg/gif/png/bmp格式图片");
                return;
            }
            if (typeof FileReader == 'undefined') {
                $(this).attr("disabled", "disabled");
                $("#promptInformation").html("<h4 style='margin-left: 150px;color: #ff0000;'>浏览器版本过低!无法显示和裁切图片</h4>");
                return;
            }
            var reader = new FileReader();

            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            };

            reader.readAsDataURL(this.files[0]);
//            this.files = [];
            $("#fileName").val("");
            $("#imgStr").val("");
            $('.cropped').html('');

        });

        $('#btnCrop').on('click', function () {
            //执行剪切
            cutImg();
        });
        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        });
        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        });
        function cutImg() {//剪切操作
            var filePath, fileName, fileType;
            var imgurl = $("#imgsrc").val();
            var background = $('.imageBox').attr("style");
            var fileLoad = $("#upload-file").val();
            if (imgurl && fileLoad.length < 0) {
                filePath = imgurl;
            }
            if (fileLoad) {
                filePath = fileLoad;
            }
            if (typeof(background) == 'undefined' || background.length <= 0) {
                return;
            }
            if (typeof(filePath) == 'undefined' || filePath.length <= 0) {
                alert("请选择jpg/gif/png/bmp格式图片");
                return;
            }
            if (filePath.split("\\").length > 2) {
                fileName = filePath.split("\\").pop();
            } else if (filePath.split("/").length > 2) {
                fileName = filePath.split("/").pop();
            }
            fileType = filePath.split(".").pop();
            //判断file类型
            if (types.indexOf(fileType.toLowerCase()) < 0) {
                alert("请选择jpg/gif/png/bmp格式图片");
                return;
            }

            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
            $("#fileName").val(fileName);//file name
            $('#imgStr').val(img);  //file base64 url
        }
    });


    function ajaxFileUpload() {//上传
        var loading = $("#loading").css("display");
        if (loading != 'none') {
            alert("请选择jpg/gif/png/bmp格式图片");
            return;
        }
        var file;
        var imgurl = $("#imgsrc").val();
        var fileLoad = $("#upload-file").val();
        if (fileLoad) {//有选择文件
            file = fileLoad;
        }
        if (imgurl && fileLoad.length < 0) {//没有选择文件
            file = imgurl;
            $('#btnCrop').trigger("click");
        }
        if (!file) {
            alert("请选择jpg/gif/png/bmp格式图片");
            return;
        }
        var fileType = file.split(".").pop();
        if (types.indexOf(fileType.toLowerCase()) < 0) {
            alert("请选择jpg/gif格式图片");
            return;
        }
        var img = $("#imgStr").val();
        if (!img) {
            $('#btnCrop').trigger("click");
        }
        upBase64();
        return false;

    }


    function backUrl(message) {
        if (!message) {
            return;
        }
        var frameName = "_dialogFrame";
        var contentFrame = top.window.frames[frameName];
        if (!contentFrame) {
            contentFrame = tools.getCurrentFrame();
        }
        contentFrame.result(message);
        if (message.code == "SUCCESS" || message.code == "100000") {
            var imgUrl = message.data.imgUrl;
            var baseUrl = message.data.baseUrl;
            var idField = tools.getQueryString('idField');
            var textField = tools.getQueryString('textField');
            var fn = tools.getQueryString('fn');
            if (typeof fn == 'function') {
                eval("top." + fn + "(" + code + "," + name + ")");
            } else {
                if (contentFrame) {
                    var contentFrameDoc = contentFrame.document;
                    $("#" + idField, contentFrameDoc).val(imgUrl);
                    $("#" + textField, contentFrameDoc).attr("src", baseUrl + imgUrl);
                    contentFrame.showDel();
                } else {
                    $("#" + idField, top.window.document).val(imgUrl);
                    $("#" + textField, top.window.document).attr("src", baseUrl + imgUrl);
                }
            }
        }
        $.bootbox.hideName('img');

    }

    function upBase64() {
        var url = base+"/personal/view/uploadBase";
        $.post(url, $("#upForm").serialize(), function (data) {
            backUrl(data)
        });
    }

</script>

[/@htmlFoot]